<script setup lang="ts">
import {ref, reactive} from "vue";
import {useMessage, NButton, NCard, NSpace} from 'naive-ui';
import Border from "@/components/Border.vue";

const msg = ref('');
const msgTextArea = ref('hello-world');

const message = useMessage();

const checked = ref(true)

const isChecked = ref(false);
const cities = ref(['shenzhen', 'shanghai']);
const status = ref(0)
const menu = ref('')

const options = [
  {value: 'baidu', name: '百度'},
  {value: 'google', name: '谷歌'},
  {value: 'bing', name: '必应'},
];

function info() {
  const idx = Math.floor(Math.random() * 1000) % 5;
  switch (idx) {
    case 0:
      message.info("系统处理中");
      break;
    case 1:
      message.warning("系统过载");
      break;
    case 2:
      message.success("任务1完成");
      break;
    case 3:
      message.loading("任务2处理中");
      break;
    default:
      message.error("哦，糟糕，失败了");
  }

}
</script>

<template>
  <border>
    <n-button @click="info()">点击</n-button>
    <p>信息提示</p>
  </border>

  <border>
    <n-card title="文本框">
      <p>输入的是：{{ msg }}</p>
      <input type="text" v-model="msg">
    </n-card>
  </border>
  <border>
    <n-card title="多行文本">
      <p>输入的是：{{ msgTextArea }}</p>
      <textarea v-model="msgTextArea"></textarea>
    </n-card>
  </border>
  <border>
    <n-card title="复选框">
      <p></p>
      <label><input type="checkbox" value="1" v-model="isChecked">上海</label>
    </n-card>
  </border>
  <border>
    <n-card title="复选框">
      <p>选中：{{ cities }}</p>
      <n-space>
        <label><input type="checkbox" value="shanghai" v-model="cities">上海</label>
        <label><input type="checkbox" value="beijing" v-model="cities">北京</label>
        <label><input type="checkbox" value="guangzhou" v-model="cities">广州</label>
        <label><input type="checkbox" value="shenzhen" v-model="cities">深圳</label>
      </n-space>
    </n-card>
  </border>
  <border>
    <n-card title="单选框">
      <p>选中：{{ status }}</p>
      <n-space>
        <label><input type="radio" value="0" v-model="status">禁用</label>
        <label><input type="radio" value="1" v-model="status">开启</label>
      </n-space>
    </n-card>
  </border>
  <border>
    <n-card title="下拉选择器">
      <p>选中：{{ menu }}</p>
      <select v-model="menu">
        <option value="" disabled>--请选择--</option>
        <option v-for="(opt,idx) of options" :value="opt.value">{{ opt.name }}</option>
      </select>
    </n-card>
  </border>



</template>

<style scoped>

</style>